<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>猜数字游戏</title>
  <style>
      body {
          /* 遗传性 */
          text-align: center;
      }

      .title {
          font-size: 32px;
          /* 外边距 */
          margin-top: 30vh;
          margin-bottom: 24px;
          /* 内边距 */
          padding: 0;
      }

      .page {
          /* 不显示 */
          display: none;
      }

      .page.display {
          /* 按块显示 */
          display: block;
      }

      button {
          padding: 8px 16px;
          border-radius: 24px;
          border: 1px solid rgba(0, 0, 0, 0.1);
      }

      .rule {
          margin-bottom: 12px;
          font-size: 14px;
      }

      input {
          padding: 8px 16px;
          border-radius: 24px;
          border: 1px solid rgba(0, 0, 0, 0.1);
      }

      .output-result {
          margin-top: 12px;
          line-height: 32px;
          font-size: 14px;
      }

      .game-result .tip {
          font-size: 14px;
          line-height: 32px;
      }

      .game-result .restart-game {
          margin-top: 24px;
      }
  </style>
</head>
<body>
<!-- 标题 -->
<div class="title">
  猜数字游戏
</div>

<!-- 启动页面 0 -->
<div class="launch page">
  <button onclick="game.startGame()">开始游戏</button>
</div>

<!-- 游戏主体 1 -->
<div class="game page">
  <div class="rule">请输入一个0-100的数字</div>

  <!-- 输入 -->
  <div class="input-wrapper">
    <input type="number" class="inputNumber">
    <button onclick="game.tryNumber()">试一下</button>
  </div>

  <!-- 输出结果 -->
  <div class="output-result">
  </div>
</div>

<!-- 游戏结果 2 -->
<div class="game-result page">
  <div class="tip">恭喜您猜对了!!!</div>
  <div class="tip">本次的数字是 <span class="target-number"></span></div>
  <div class="tip">您一共猜了 <span class="try-counts"></span> 次，
    <sapn class="ranking"></sapn>
    !!!
  </div>
  <button class="restart-game" onclick="game.restartGame()">重新开始</button>
</div>

<script src="https://" />

<script>
    // 1. 随机生成一个0-100的数字
    // 2. 点击开始游戏，显示游戏界面
    // 3. 输入数字，点击试一下，在结果区域显示是否正确
    // 4. 如果输入正确，则显示游戏结果
    // 5. 点击重新开始，从第1步重新开始

    class Game {
        targetNumber = 0; // 目标数字
        tryCounts = 0; // 尝试的次数
        status = 0; // 0: 游戏未开始 1：游戏进行中 2：游戏结束了
        pages = [];

        constructor() {
            this.launchPage = document.querySelector('.launch.page'); // 在一个标签上同时存在2个类
            this.gamePage = document.querySelector('.game.page');
            this.gameResultPage = document.querySelector('.game-result.page');

            this.pages = [
                this.launchPage, // 0
                this.gamePage, // 1
                this.gameResultPage, // 2
            ];

            this.setStatus(0);
        }

        setStatus(status) {
            this.status = status;
            const currentPage = this.pages[status];
            // 将所有页面隐藏
            this.pages.forEach(page => {
                page.classList.remove('display');
            });
            // 将指定页面显示
            currentPage.classList.add('display');
        }

        generateTargetNumber() {
            this.targetNumber = Math.floor(Math.random() * 100);
        }

        /**
         * 开始游戏
         */
        startGame() {
            this.generateTargetNumber();
            this.setStatus(1);
            this.tryCounts = 0;
        }

        /**
         * 打印尝试的结果
         */
        printTryResult(result) {
            const outputResult = this.gamePage.querySelector('.output-result');
            const line = document.createElement('div');
            line.innerText = result;
            outputResult.appendChild(line);
        }

        clearTryResults() {
            const outputResult = this.gamePage.querySelector('.output-result');
            outputResult.innerHTML = '';
        }

        /**
         * 尝试数字是否正确
         */
        tryNumber() {
            const inputNumber = this.gamePage.querySelector('.inputNumber');
            const value = parseFloat(inputNumber.value);

            if (value < 0 || value > 100 || inputNumber.value.includes('.')) {
                alert('请输入0-100的整数')
                return;
            }

            this.tryCounts++;

            if (value > this.targetNumber) {
                // 猜大了
                this.printTryResult(`您输入的是${value}，猜大了`);
            } else if (value < this.targetNumber) {
                // 猜小了
                this.printTryResult(`您输入的是${value}，猜小了`);
            } else {
                // 猜对了
                inputNumber.value = '';
                this.clearTryResults();
                this.onGameWin();
            }

            // console.log(this.targetNumber, value); 4
        }

        /**
         * 当游戏胜利时，触发的行为
         */
        onGameWin() {
            this.setStatus(2);
            const targetNumber = this.gameResultPage.querySelector('.target-number');
            const tryCounts = this.gameResultPage.querySelector('.try-counts');
            const ranking = this.gameResultPage.querySelector('.ranking');
            targetNumber.innerText = this.targetNumber;
            tryCounts.innerText = this.tryCounts;

            switch (true) {
                case this.tryCounts < 3:
                    ranking.innerText = '炉上烧水  开了？';
                    break;
                case this.tryCounts < 5:
                    ranking.innerText = '一般';
                    break;
                default:
                    ranking.innerText = '炉上烧水  开了也是沸物';
                    break;
            }
        }

        /**
         * 重新开始
         */
        restartGame() {
            this.startGame();
        }
    }

    window.game = new Game();
</script>
</body>
</html>